<template>
  <div class="banbody">
   <div class="text">
    热门城市
   </div>
   <ul class="list">
    <li v-for="(v,i) in arr" :key="i" @click="funb(v)">
        {{v}}
    </li>
   </ul>
   <ul class="list2">
    <li v-for="(v,i) in dizhi" :key="i">
        {{v}}
    </li>
   </ul>
  </div>
</template>

<script>
export default {
 data(){
    return{
        arr:["北京","上海","广州","深圳","武汉","成都","厦门","南京","杭州"]
        ,
        dizhi:["阿坝自治区","安康市","阿克苏地区","阿里地区","阿拉二市","阿拉善盟","阿勒泰地区","澳门特别行政区","安庆市","安泰市","鞍山市","安阳市","白城市","北海市","毕节市","宝鸡市","北京市","白沙黎族自治县"]
    }
 },
 methods:{
    funb(v){
        this.$router.push({name:"wuhome",query:{xiaohei:v}})
        // console.log(v)
    }
 }
};
</script>

<style scoped lang="scss">
    .banbody{
        width: 100%;
        height: 100%;
        .text{
            width: 90%;
            height: 0.56rem;
            margin: auto;
            font-size: 0.2rem;
            line-height: 0.56rem;
        }
        .list{
            width: 90%;
            height: 1.24rem;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: #f9f9f9;
            li{
                width: 1.06rem;
                height: 0.32rem;
                font-size: 0.18rem;
                line-height:0.32rem ;
                text-align: center;
                background-color: white;
            }
        }
        .list2{
            width: 90%;
            height: 100%;
            margin: 0.1rem auto;
            li{
                width: 100%;
                height: 0.62rem;
                font-size: 0.16rem;
                border-bottom: 0.01rem solid gray;
                line-height: 0.62rem;
            }
        }
    }
</style>